<template>

  <div id=" ">
    <video autoplay muted loop poster="../assets/bg.jpg" class="bgvid" id="bgvid">
      <source src="" type="video/mp4">
    </video>
    <div class="login-container">
      <el-card class="login-card" header="请先登陆" style="background-color: rgba(221, 220, 220, 0.4)!important;">
        <el-form @submit.native.prevent="login">
          <el-form-item label="用户名">
            <el-input
              prefix-icon="el-icon-user-solid"
              v-model="model.account"
              required
              minlength="3"
              maxlength="20"
              placeholder="奔跑的面条"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              style="width: 600px;"
              type="password"
              prefix-icon="el-icon-s-opportunity"
              clearable
              required
              maxlength="20"
              error
              v-model="model.password"
              placeholder="password"
              minlength="5"
              show-password
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" native-type="submit">登陆</el-button>
            <el-button type="primary" @click="afterpage">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        account: null,
        password: null
      }
    };
  },
  created(){
    sessionStorage.clear();
  },
  methods: {
    afterpage() {
      this.model.account = null;
      this.model.password = null;
    },
    async login() {
      const response = await this.$http.post("login", this.model);
      sessionStorage.username =  response.data.username;
      sessionStorage.token = response.data.token;
      this.$router.push("/");
      this.$message({
        type: "success",
        message: "登陆成功"
      });
    }
  }
};
</script>

<style scope>

#bgvid{
  position: fixed; 
  right:0;
  bottom:0;
  min-width:100%; 
  min-height:100%; 
  width:100%;
  height:auto;
  z-index:-2;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: cover;
}

.login-container {
  height: 100%;
  width: 100%;
  padding-top: 15rem;
}
.login-card {
  color: #ffffff!important;
  width: 40rem;
  margin: 0 auto;
}
.el-card{
  
  color: #ffffff;
  border-color: rgba(255, 255, 255, .3)!important;
}
.el-card__header{
  border-color: rgba(255, 255, 255, .3)
}
.el-form-item__label{
  color: #ffffff;
}
</style>